<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <!-- template 标签只是一个临时包裹标签，不会产生真正的 dom 节点 -->
      <template v-if="isDeleteStatus">
        <span @click="list.splice(0)">全部删除</span>
        &nbsp;
        <span @click="isDeleteStatus = false">完成</span>
      </template>
      <van-icon v-else name="delete-o" @click="isDeleteStatus = true" />
    </van-cell>
    <van-cell v-for="(v, i) of list" :key="v" :title="v" @click="$emit('search', v)">
      <van-icon v-show="isDeleteStatus" name="close" @click="list.splice(i, 1)" />
    </van-cell>
    <van-cell v-if="list.length === 0" title="暂无历史记录..." style="color: #999;" />
  </div>
</template>

<script>
export default {
  name: 'SearchHistory',
  props: ['list'],
  data () {
    return {
      isDeleteStatus: false // 是否是删除状态
    }
  }
}
</script>

<style>

</style>
